<script setup lang="ts" name="Menubar">
import { storeToRefs } from 'pinia'
import { ClickOutside as vClickOutside } from 'element-plus'
import logo from '@/assets/logo.svg'
import { useDesignerStore } from '@/store/bigScreen/designerStore'
import { useLayoutStore } from '@/store/bigScreen/layoutStore'
import useView from './hooks/useView'
import usePublic from './hooks/usePublic'

const layoutStore = useLayoutStore()
const designerStore = useDesignerStore()
const { editCanvas } = storeToRefs(designerStore)
const { layoutVisible } = storeToRefs(layoutStore)

const { visible, activeType, toggleSubMenu, enterHandle, handleClickOutside } = usePublic()
const { setZoom, rulerChange, rulerLineChange, clearRulerLines } = useView()

const installComponent = (type) => {
  layoutStore.installComponent(type)
}
</script>

<template>
  <div class="menubar">
    <div class="logo">
      <router-link title="大屏管理" class="logo" to="/Plugins/Designer/BigScreen">
        <component class="logo-img" :is="logo"></component>
      </router-link>
    </div>
    <div class="left">
      <div :class="['item-menu', activeType === 'file' && visible ? 'active' : '']" v-click-outside="handleClickOutside">
        <span class="dropdown-link" @click.prevent="toggleSubMenu('file')" @mouseenter="enterHandle('file')">文件</span>
        <div class="submenu">
          <div class="item-submenu">
            <el-icon></el-icon>
            <span class="text">保存</span>
            <span class="keyboard-text">Ctrl+S</span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu">
            <el-icon></el-icon>
            <span class="text">发布</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
          <div class="divided"></div>
          <div class="item-submenu">
            <el-icon></el-icon>
            <span class="text">导入JSON文件</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu">
            <el-icon></el-icon>
            <span class="text">导出JSON文件</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
          <div class="divided"></div>
          <div class="item-submenu">
            <el-icon></el-icon>
            <span class="text">生成图片</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
          <div class="divided"></div>
          <div class="item-submenu">
            <el-icon></el-icon>
            <span class="text">预览</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
        </div>
      </div>
      <div :class="['item-menu', activeType === 'edit' && visible ? 'active' : '']" v-click-outside="handleClickOutside">
        <span class="dropdown-link" @click="toggleSubMenu('edit')" @mouseenter="enterHandle('edit')">编辑</span>
        <div class="submenu">
          <div class="item-submenu">
            <el-icon></el-icon>
            <span class="text">撤销</span>
            <span class="keyboard-text">Ctrl+Z</span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu">
            <el-icon></el-icon>
            <span class="text">恢复</span>
            <span class="keyboard-text">Shift+Ctrl+Z</span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu">
            <el-icon></el-icon>
            <span class="text">清空</span>
            <span class="keyboard-text">Alt+Ctrl+Z</span>
            <el-icon></el-icon>
          </div>
          <div class="divided"></div>
          <div class="item-submenu">
            <el-icon></el-icon>
            <span class="text">剪切</span>
            <span class="keyboard-text">Ctrl+X</span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu">
            <el-icon></el-icon>
            <span class="text">复制</span>
            <span class="keyboard-text">Ctrl+C</span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu">
            <el-icon></el-icon>
            <span class="text">粘贴</span>
            <span class="keyboard-text">Ctrl+V</span>
            <el-icon></el-icon>
          </div>
          <div class="divided"></div>
          <div class="item-submenu">
            <el-icon></el-icon>
            <span class="text">JSON源文件</span>
            <el-icon></el-icon>
          </div>
        </div>
      </div>
      <div :class="['item-menu', activeType === 'view' && visible ? 'active' : '']" v-click-outside="handleClickOutside">
        <span class="dropdown-link" @click="toggleSubMenu('view')" @mouseenter="enterHandle('view')">视图</span>
        <div class="submenu">
          <div class="item-submenu" @click="setZoom('zoomOut')">
            <el-icon></el-icon>
            <span class="text">放大</span>
            <span class="keyboard-text">Ctrl++</span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="setZoom('zoomIn')">
            <el-icon></el-icon>
            <span class="text">缩小</span>
            <span class="keyboard-text">Ctrl+-</span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="setZoom('zoomDefault')">
            <el-icon></el-icon>
            <span class="text">默认大小</span>
            <span class="keyboard-text">Ctrl+`</span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="setZoom('zoom0')">
            <el-icon></el-icon>
            <span class="text">按屏幕大小缩放</span>
            <span class="keyboard-text">Ctrl+0</span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="setZoom('zoom1')">
            <el-icon></el-icon>
            <span class="text">100%</span>
            <span class="keyboard-text">Ctrl+1</span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="setZoom('zoom2')">
            <el-icon></el-icon>
            <span class="text">200%</span>
            <span class="keyboard-text">Ctrl+2</span>
            <el-icon></el-icon>
          </div>
          <div class="divided"></div>
          <div class="item-submenu" @click="rulerChange">
            <SvgIcon v-if="editCanvas.isRulerShow" icon="ep:check"></SvgIcon>
            <el-icon v-else></el-icon>
            <span class="text">标尺</span>
            <span class="keyboard-text">Ctrl+R</span>
            <el-icon></el-icon>
          </div>
          <div class="divided"></div>
          <div class="item-submenu" @click="rulerLineChange">
            <el-icon></el-icon>
            <span class="text">参考线</span>
            <span class="keyboard-text">Ctrl+;</span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="clearRulerLines">
            <el-icon></el-icon>
            <span class="text">清除参考线</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
        </div>
      </div>
      <div :class="['item-menu', activeType === 'window' && visible ? 'active' : '']" v-click-outside="handleClickOutside">
        <span class="dropdown-link" @click="toggleSubMenu('window')" @mouseenter="enterHandle('window')">窗口</span>
        <div class="submenu">
          <div class="item-submenu" @click="installComponent('CkCharacter')">
            <SvgIcon v-if="layoutVisible.CkCharacter.visible" icon="ep:check"></SvgIcon>
            <el-icon v-else></el-icon>
            <span class="text">字符</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="installComponent('CkParagraph')">
            <SvgIcon v-if="layoutVisible.CkParagraph.visible" icon="ep:check"></SvgIcon>
            <el-icon v-else></el-icon>
            <span class="text">段落</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="installComponent('CkFilter')">
            <SvgIcon v-if="layoutVisible.CkFilter.visible" icon="ep:check"></SvgIcon>
            <el-icon v-else></el-icon>
            <span class="text">滤镜</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="installComponent('CkLayer')">
            <SvgIcon v-if="layoutVisible.CkLayer.visible" icon="ep:check"></SvgIcon>
            <el-icon v-else></el-icon>
            <span class="text">图层</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="installComponent('CkProperty')">
            <SvgIcon v-if="layoutVisible.CkProperty.visible" icon="ep:check"></SvgIcon>
            <el-icon v-else></el-icon>
            <span class="text">属性</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="installComponent('CkHistory')">
            <SvgIcon v-if="layoutVisible.CkHistory.visible" icon="ep:check"></SvgIcon>
            <el-icon v-else></el-icon>
            <span class="text">历史记录</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="installComponent('CkData')">
            <SvgIcon v-if="layoutVisible.CkData.visible" icon="ep:check"></SvgIcon>
            <el-icon v-else></el-icon>
            <span class="text">数据</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="installComponent('CkAnimation')">
            <SvgIcon v-if="layoutVisible.CkAnimation.visible" icon="ep:check"></SvgIcon>
            <el-icon v-else></el-icon>
            <span class="text">动画</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="installComponent('CkEvent')">
            <SvgIcon v-if="layoutVisible.CkEvent.visible" icon="ep:check"></SvgIcon>
            <el-icon v-else></el-icon>
            <span class="text">事件</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
          <div class="divided"></div>
          <div class="item-submenu" @click="installComponent('CkPackage')">
            <SvgIcon v-if="layoutVisible.CkPackage.visible" icon="ep:check"></SvgIcon>
            <el-icon v-else></el-icon>
            <span class="text">组件</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
          <div class="item-submenu" @click="installComponent('CkToolbar')">
            <SvgIcon v-if="layoutVisible.CkToolbar.visible" icon="ep:check"></SvgIcon>
            <el-icon v-else></el-icon>
            <span class="text">工具栏</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
        </div>
      </div>
      <div :class="['item-menu', activeType === 'help' && visible ? 'active' : '']" v-click-outside="handleClickOutside">
        <span class="dropdown-link" @click="toggleSubMenu('help')" @mouseenter="enterHandle('help')">帮助</span>
        <div class="submenu">
          <div class="item-submenu">
            <el-icon></el-icon>
            <span class="text">快捷键参考</span>
            <span class="keyboard-text"></span>
            <el-icon></el-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="center"></div>
    <div class="right">
      <!-- <span><svg-icon icon="ri:close-line"></svg-icon></span> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.menubar {
  z-index: 1000;
  display: flex;
  align-items: center;
  padding-top: 4px;

  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    margin-left: 8px;

    .logo-img {
      width: 20px;
      height: 20px;
      color: var(--el-color-primary);
      fill: currentcolor;
    }
  }

  .left {
    display: flex;
    align-items: center;
    justify-content: center;

    .item-menu {
      position: relative;
      display: flex;

      &.active {
        .dropdown-link {
          color: var(--el-text-color-regular);
          background-color: var(--el-fill-color-dark);
        }

        .submenu {
          display: block;
        }
      }

      .submenu {
        position: absolute;
        top: 24px;
        left: 0;
        display: none;
        width: 260px;
        padding: 4px;
        background-color: var(--el-bg-color);
        border-radius: 4px;
        box-shadow: var(--el-box-shadow);

        .divided {
          height: 1px;
          margin: 4px -4px;
          background-color: var(--el-border-color-light);
        }

        .item-submenu {
          display: flex;
          align-items: center;
          height: 26px;
          border-radius: 4px;
          cursor: pointer;

          .text {
            flex: 1;
            color: var(--el-text-color-regular);
          }

          .keyboard-text {
            color: var(--el-text-color-regular);
          }

          .el-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            font-size: 16px;
          }

          &:hover {
            background-color: var(--el-fill-color-lighter);
          }
        }
      }
    }

    .dropdown-link {
      padding: 4px 10px;
      color: var(--el-text-color-secondary);
      line-height: 1;
      border-radius: 2px;
      cursor: pointer;

      &:hover {
        color: var(--el-text-color-regular);
        background-color: var(--el-fill-color-dark);
      }
    }
  }

  .center {
    display: flex;
    flex: 1;
  }
}
</style>
